<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@include file="check-exit.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS-->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- Font-icon css-->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<title>Vali Admin</title>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries-->
<!--if lt IE 9
    script(src='https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js')
    script(src='https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js')
    -->
</head>
<body class="sidebar-mini fixed">
	<div class="wrapper">
		<!-- Navbar-->
		<header class="main-header hidden-print">
			<a class="logo" href="index-user.jsp">uCRM</a>
			<nav class="navbar navbar-static-top">
				<!-- Sidebar toggle button-->
				<a class="sidebar-toggle" href="#" data-toggle="offcanvas"></a>
				<!-- Navbar Right Menu-->
				<div class="navbar-custom-menu">
					<ul class="top-nav">
						<!--Notification Menu-->
						<!--<li class="dropdown notification-menu"><a class="dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell-o fa-lg"></i></a>
                <ul class="dropdown-menu">
                  <li class="not-head">You have 4 new notifications.</li>
                  <li><a class="media" href="javascript:;"><span class="media-left media-icon"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x text-primary"></i><i class="fa fa-envelope fa-stack-1x fa-inverse"></i></span></span>
                      <div class="media-body"><span class="block">Lisa sent you a mail</span><span class="text-muted block">2min ago</span></div></a></li>
                  <li><a class="media" href="javascript:;"><span class="media-left media-icon"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x text-danger"></i><i class="fa fa-hdd-o fa-stack-1x fa-inverse"></i></span></span>
                      <div class="media-body"><span class="block">Server Not Working</span><span class="text-muted block">2min ago</span></div></a></li>
                  <li><a class="media" href="javascript:;"><span class="media-left media-icon"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x text-success"></i><i class="fa fa-money fa-stack-1x fa-inverse"></i></span></span>
                      <div class="media-body"><span class="block">Transaction xyz complete</span><span class="text-muted block">2min ago</span></div></a></li>
                  <li class="not-footer"><a href="#">See all notifications.</a></li>
                </ul>
              </li>-->
						<!-- User Menu-->
						<li class="dropdown"><a class="dropdown-toggle" href="#"
							data-toggle="dropdown" role="button" aria-haspopup="true"
							aria-expanded="false"><i class="fa fa-user fa-lg"></i></a>
							<ul class="dropdown-menu settings-menu">
								<li><a href="page-user.html"><i class="fa fa-cog fa-lg"></i>
										用户设置</a></li>
								<li><a href="page-user.html"><i
										class="fa fa-user fa-lg"></i> 关于</a></li>
							</ul></li>
						<li class="dropdown"><a class="dropdown-toggle" href="#"
							data-toggle="dropdown" role="button" aria-haspopup="true"
							aria-expanded="false"><i class="fa fa-sign-out fa-lg"></i></a>
							<ul class="dropdown-menu settings-menu">
								<li><a href="${pageContext.request.contextPath }/usersExit"><i
										class="fa fa-sign-out fa-lg"></i> 退出登入</a></li>
							</ul></li>
					</ul>
				</div>
			</nav>
		</header>
		<!-- Side-Nav-->
		<aside class="main-sidebar hidden-print">
			<section class="sidebar">
				<div class="user-panel">
					<div class="pull-left image">
						<img class="img-circle" src="images/user.png" alt="User Image">
					</div>
					<div class="pull-left info">
						<p>${users.userName }</p>
						<p class="designation">欢迎登入,${users.roleName }</p>
					</div>
				</div>
				<!-- 菜单 开始-->
				<ul class="sidebar-menu">
					<li class="treeview"><a href="index-user.jsp"><i
							class="fa fa-home fa-lg"></i><span>首页</span></a></li>
					<li class="active"><a
						href="${pageContext.request.contextPath }/listContract"><i
							class="fa fa-th-list"></i><span>合同查看</span></a></li>
					<li class="treeview"><a href="#"><i class="fa fa-user"></i><span>用户查看</span></a></li>
				</ul>
				<!-- 菜单 结束-->
			</section>
		</aside>
		<div class="content-wrapper">
			<div class="page-title">
				<div>
					<h1>
						<i class="fa fa-th-list"></i> 合同管理
					</h1>
				</div>
				<!-- <div>
					<a class="btn btn-primary btn-flat" href="#"><i
						class="fa fa-lg fa-plus"></i></a><a class="btn btn-info btn-flat"
						href="#"><i class="fa fa-lg fa-refresh"></i></a><a
						class="btn btn-warning btn-flat" href="#"><i
						class="fa fa-lg fa-trash"></i></a>
				</div> -->
			</div>
			<div class="row">
				<div class="col-md-12">
					<div class="card">
						<div class="card-body">
							<table class="table table-hover table-bordered" id="sampleTable">
								<thead>
									<tr>
										<th>所属部门</th>
										<th>合同ID</th>
										<th>客户名称</th>
										<th>最终客户</th>
										<th>销售</th>
										<th>总金额</th>
										<th>回款期次</th>
										<th>款项比例</th>
										<th>开票日期</th>
										<th>计划回款金额</th>
										<th>计划回款时间</th>
										<th>回款状态</th>
										<th>回款计划描述</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<c:choose>
										<c:when test="${empty listcontract }">
										</c:when>
										<c:otherwise>
											<c:forEach items="${listcontract }" var="contract">
												<tr>
													<td style="vertical-align: middle;" width="5%">${contract.areaName }</td>
													<td style="vertical-align: middle;" width="5%">${contract.contractID }</td>
													<td style="vertical-align: middle;" width="5%">${contract.consumerName }</td>
													<td style="vertical-align: middle;" width="5%">${contract.endConsumer }</td>
													<td style="vertical-align: middle;">${contract.userName }</td>
													<td style="vertical-align: middle;">${contract.aggregateAmount }</td>
													<td style="vertical-align: middle;" width="5%">${contract.paybackPeriod }</td>
													<td style="vertical-align: middle;" width="5%">${contract.amountRatio }</td>
													<td style="vertical-align: middle;"><fmt:formatDate
															value="${contract.ticketDate }" pattern="yyyy/MM/dd" /></td>
													<td style="vertical-align: middle;" width="7%">${contract.planReturnAmount }</td>
													<td style="vertical-align: middle;"><fmt:formatDate
															value="${contract.planReturnDate }" pattern="yyyy/MM/dd" /></td>
													<td style="vertical-align: middle;" width="5%">${contract.returnStatus }</td>
													<td style="vertical-align: middle;" width="30%">${contract.planReturnRemark }</td>
													<td style="vertical-align: middle;" width="7%">
														<button
															class="button button-large button-plain button-borderless">
															<i class="fa fa-reply"></i>
														</button>
														<button
															class="button button-large button-plain button-borderless">
															<i class="fa fa-trash-o"></i>
														</button></td>
												</tr>
											</c:forEach>
										</c:otherwise>
									</c:choose>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- Javascripts-->
	<script src="js/jquery-2.1.4.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/plugins/pace.min.js"></script>
	<script src="js/main.js"></script>
	<script type="text/javascript"
		src="js/plugins/jquery.dataTables.min.js"></script>
	<script type="text/javascript"
		src="js/plugins/dataTables.bootstrap.min.js"></script>
	<script type="text/javascript">
		$('#sampleTable').DataTable();
	</script>
</body>
</html>